{% extends "vmServer/index_server.html" %}

{% block content %}



				<div class="col-xs-12">
				<h3 class="header smaller lighter blue">
				<i class="icon-hand-right icon-animated-hand-pointer blue"></i>
				{{ vmServerr.name }}网络管理</h3>				
	
							<div class="col-sm-3">
										<div class="widget-box">
											<div class="widget-header widget-header-flat">
												<h4>Tips</h4>
											</div>

											<div class="widget-body">
												<div class="widget-main">
													<ul class="list-unstyled spaced2">
														<li>
															<i class="icon-circle green"></i>
															平台创建的网络类型支持<strong>桥接类型</strong>与<strong>Nat类型</strong>
														</li>
							
														<li >
															<i class="icon-circle green"></i>
															提供创建OpenVswitch与Linux Bridge两种驱动类型的网络
														</li>
							
															<li class="muted">
																<i class="icon-warning-sign orange"></i>
																OpenVswith网络命名建议：
																								
															</li>
						
															<li>
																<ul class="list-unstyled">
																	<li>
																		<i class="icon-caret-right blue"></i>
																		外网：<strong>ovs-ext</strong>
																	</li>
						
																	<li>
																		<i class="icon-caret-right blue"></i>
																		内网：<strong>ovs-int</strong>
																	</li>
						
																</ul>
															</li>	
							
															<li>
																
																<li>
																	<i class="icon-warning-sign orange"></i>
																	Linux Bridge网络命名建议：
																</li>
																	
																<li>
																	<ul class="list-unstyled">
																		<li>
																			<i class="icon-caret-right blue"></i>
																			外网：<strong>br-ext</strong>
																		</li>
							
																		<li>
																			<i class="icon-caret-right blue"></i>
																			内网：<strong>br-int</strong>
																		</li>
							
																	</ul>
																</li>											
																																			
															
														</ul>													
												</div>
											</div>
										</div>
									</div>
	
	
		
		

									<div class="col-sm-6">
											
									
										<div class="tabbable">
											<ul class="nav nav-tabs padding-12 tab-color-blue background-blue" id="myTab4">
												<li class="active">
													<a data-toggle="tab" href="#profile4">网络列表</a>
												</li>											
												


											</ul>

											<div class="tab-content">
												

												
												<div id="profile4" class="tab-pane in active">
													<div class="widget-toolbox padding-8 clearfix">
		
														<button class="btn btn-xs btn-success pull-left" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#addNetworkModal">
															<i class="icon-arrow-right icon-plus"></i>
															<span class="bigger-110">添加网络</span>
														</button>
													</div>												
													<div>
														<table class="table table-striped table-bordered">
															<thead>
																<tr>
																	<th class="center">序号</th>
																	<th class="center">网络名称</th>
																	<th class="center">网络类型</th>
																	<th class="center">驱动类型</th>
																	<th class="hidden-xs center">激活</th>
																	<th class="hidden-480 center">是否持久化</th>
																	<th class="center">操作</th>
																</tr>
															</thead>
										
															<tbody>
																{% for ds in netList %}
																<tr>
																	<td class="center">{{ forloop.counter }}</td>
																	<td class="center">
																		<a>{{ ds.name }}</a>
																	</td>
																	<td class="center">
																		{{ ds.type }}
																	</td>
																	<td class="center">
																		{% if ds.mode == 'brctl' %}
																			Linux Bridge
																		{% else %}
																			Open vSwitch
																		{% endif %}
																	</td>																																		
																		<td class="hidden-xs center">
																			{% if ds.alive == 1 %}
																				 <span class="label label-success arrowed">Yes</span>
																			{% elif ds.alive == 0 %}										
																				 <span class="label label-danger arrowed-in">No</span>						                   		 
																			{% endif %}									
																	</td>
																	<td class="center">
																			{% if ds.pers == 1 %}
																				 <span class="label label-success arrowed">Yes</span>
																			{% elif ds.pers == 0 %}										
																				 <span class="label label-danger arrowed-in">No</span>						                   		 
																			{% endif %}																		
																	</td>
																	<td class="center">
																		<button class="btn btn-xs btn-danger" onclick="onBtnHandleNetwork(this,{{ vmServer.id}},'{{ds.name}}','delete')">
																			<i class="icon-trash  bigger-110 icon-only"></i>
																		</button>											
																	</td>
																</tr>
																{% endfor %}
															</tbody>
														</table>
													</div>													
													<div class="hr "></div>
										
													<div class="row">
														<div class="col-sm-5 pull-right">
															<h4 class="pull-right">
																Total Networks :
																<span class="red">{{ netList|length }}</span>
															</h4>
														</div>
														<div class="col-sm-7 pull-left"> 汇总信息 </div>
													</div>													
												</div>

											</div>
										</div>
									</div>	
				
				<div class="modal fade" id="addNetworkModal" tabindex="-1" role="dialog" aria-labelledby="addNetworkModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title" id="addNetworkModalLabel">
									配置网络{{ vmServerr.name }}
								</h4>
							</div>
							<div class="modal-body">
								
														<form class="form-horizontal" id="addNetwork">
																									
																<div class="form-group">
																	<label class="col-sm-3 control-label no-padding-right" for="form-field-1">
																		 <strong>
																		 	虚拟管理器
																		 </strong> 
																	</label>
							
																	<div class="col-sm-9">
																		<input class="input-sm" type="text"   value="{{ vmServer.server_ip }}" disabled/>	
																	</div>
																	<div class="col-sm-9" style="display: none;">
																		<input class="input-sm" type="text" name="server_id"   value="{{ vmServer.id }}"/>	
																	</div>											
																</div>	

																<div class="form-group">
																	<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="email"><strong>网络类型:</strong></label>
						
																	<div class="col-xs-12 col-sm-9">
																		<div class="clearfix">
																			<select id="vNetwork-select" name="network-mode"  onchange="javascript:oBtNetworkType();">
																				<option value="">选择网络类型:</option>
																				<option value="bridge">Bridge</option>	
																				<option value="nat">Nat</option>																		
																			</select>
																		</div>
																	</div>																							
																</div>
																
																<div style="display:none;" id="network_type_nat">
																	<div class="form-group">
																		<label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>网络名称:</strong></label>								
																		<div class="col-sm-9">
																			<input class="input-sm" type="text" id="form-field-6" placeholder="分配一个网络名称" name="nat-name" />																				
																		</div>
																	</div>			
																	<div class="form-group">
																		<label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>DHCP地址:</strong></label>								
																		<div class="col-sm-9">
																			<input class="input-sm" type="text" id="form-field-6" placeholder="配置DHCP地址" name="dhcpIp" />
																			<input class="input-sm" type="text" id="form-field-6" placeholder="配置子网掩码" name="dhcpMask" />																					
																		</div>
																	</div>	
																	<div class="form-group">
																		<label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>DHCP地址池:</strong></label>								
																		<div class="col-sm-9">
																			<input class="input-sm" type="text" id="form-field-6" placeholder="开始IP地址" name="dhcpStart" />
																			<input class="input-sm" type="text" id="form-field-6" placeholder="结束IP地址" name="dhcpEnd" />																				
																		</div>
																	</div>																																																
																</div>
																<div style="display:none;" id="network_type_bridge">
																	<div class="form-group">
																		<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="email"><strong>网络驱动类型:</strong></label>
							
																		<div class="col-xs-12 col-sm-9">
																			<div class="clearfix">
																				<select name="mode">
																					<option value="">选择网络类型:</option>
																					<option value="openvswitch">Open Vswitch</option>	
																					<option value="brctl">Linux Brctl</option>																		
																				</select>
																			</div>
																		</div>																							
																	</div>										
								
							
																	<div class="form-group">
																		<label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>网络名称</strong></label>
								
																		<div class="col-sm-9">
																			<input class="input-sm" type="text" id="form-field-6" placeholder="分配一个网络名称" name="bridge-name" />																				
																		</div>
																	</div>

																	<div class="form-group">
																		<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="email"><strong>绑定接口</strong></label>
							
																		<div class="col-xs-12 col-sm-9">
																			<div class="clearfix">
																				<select id="vInterface-select" name="interface">
																				<option value="">选择接口</option>
																				{% for ds in insList %}
																					
																					<option value="{{ds.name}}">{{ds.name}}</option>	
																				{% endfor %}																	
																				</select>
																			</div>
																		</div>																							
																	</div>	
																	
																	<div class="form-group">
																		<label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>STP</strong></label>
								
	
																		<div class="col-xs-3">
																				<select id="vStp-select" name="stp">
																					<option value="off">Off</option>
																					<option selected="selected" value="on">On</option>															
																				</select>
	
																		</div>
																	</div>	
																</div>	
															</form>									
								
								
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭
								</button>
								<button type="button" class="btn btn-primary" onclick="addNetwork(this)">
									添加
								</button>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>
	
			</div>
	

		
	<script type="text/javascript">

		   function onBtnHandleNetwork(obj, server_id,netk,op){
				var btnObj = $(obj);	
				btnObj.attr('disabled',true);
				if( op == 'delete' ){
					var txt=  "是否确认删除（"+netk+"）?"
				};				
				var option = {
						title: "操作主机("+"{{ vmServer.server_ip }}"+")",
						btn: parseInt("0011",2),
						onOk: function(){
							$.ajax({
								  type: 'POST',
								  url: '/handleNetwork/{{vmServer.id}}/',
								  data:{
										"server_id":server_id,
										"op":op,							
										"netkName":netk
									},
							      success:function(response){	
							    	  btnObj.removeAttr('disabled');
						                if (response["code"]=="200"){ 
						                	window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
	
						                }
							        	else{
							        		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
							        	}						                
								},
					            error:function(response){
					            	btnObj.removeAttr('disabled');
					            	window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
					            },		
								});
						},
						onCancel:function(){	
						},
						onClose:function(){
						}
					}			
				window.wxc.xcConfirm(txt, "custom", option);
			}	
	
			function addNetwork(obj) {	
				var btnObj = $(obj);
				btnObj.attr('disabled',true);
				var server_data = {};
// 				var required = ['bridgeName','name',"server_id","mode",'interface']; /* 必填项列表 */
				var form = document.getElementById('addNetwork');
				for (var i = 0; i < form.length; ++i) {
					var name = form[i].name;
					var value = form[i].value;	
// 					idx = $.inArray(name, required);						
// 					if (idx >= 0 && value.length == 0){
// 						window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
// 						btnObj.removeAttr('disabled');
// 						return false;
// 					};	
					if (  value.length != 0 && name.length != 0 ){
						server_data[name] = value;
					};					
				};				
				
				$.ajax({
					dataType: "JSON",
					url:'/configNetwork/{{vmServer.id}}/', //请求地址
					type:"POST",  //提交类似
					data:server_data,  //提交参数
					success:function(response){
						btnObj.removeAttr('disabled');
						if (response["code"] == 200){
							window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
						}
						else {
							window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
						}
						
					},
			    	error:function(response){
			    		btnObj.removeAttr('disabled');
			    		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
			    	}
				});	
			}		   
			
			function oBtNetworkType() {
				   var obj = document.getElementById("vNetwork-select"); 
				   var index = obj.selectedIndex;
				   var value = obj.options[index].value; 
				   if (value=="bridge"){
					   document.getElementById("network_type_bridge").style.display = "";  	   
					   document.getElementById("network_type_nat").style.display = "none";
				   }
				   else {
					   document.getElementById("network_type_bridge").style.display = "none";	
					   document.getElementById("network_type_nat").style.display = ""; 
				   }
			}			
	
	</script>
{% endblock %}